<template>
  <div class="home-index-card">
    <!-- 标题 -->
    <div class="title">
      <div
        class="index-item-title"
        type="primary"
        :style="{ color: indexStateTitle }"
        :title="index.name"
        @click="indexInfo()"
      >
        {{ index.name }}
      </div>
      <t-button shape="round" variant="dashed" class="ml-8px" @click="execCopy(index.name)"
        >复制</t-button
      >
    </div>
    <!-- 别名 -->
    <div class="alias">
      <IndexAlias :alias="index.alias" :index="index.name" @refresh="refreshIndex" />
    </div>
    <!-- 详细 -->
    <div class="detail">
      <div>size: {{ index.size }}</div>
      <div>docs: {{ index.doc_count }}</div>
    </div>
    <!-- 操作 -->
    <div class="option">
      <t-tooltip :effect="theme" content="迁移索引" placement="bottom">
        <t-button variant="text" theme="primary" shape="square" @click="indexReindex(index.name)">
          <template #icon>
            <icon-rotate-right />
          </template>
        </t-button>
      </t-tooltip>
      <t-tooltip :effect="theme" :content="indexStateTooltip" placement="bottom">
        <t-popconfirm
          :content="`确认${indexStateTooltip}索引？`"
          :ok-text="indexStateTooltip"
          @ok="indexOperation"
        >
          <t-button theme="primary" shape="square" variant="text" :status="indexStateBtn">
            <template #icon>
              <icon-pause v-if="indexStateBtn === 'danger'" />
              <icon-play-arrow v-else />
            </template>
          </t-button>
        </t-popconfirm>
      </t-tooltip>
      <t-tooltip :effect="theme" content="删除索引" placement="bottom">
        <t-button theme="danger" shape="square" variant="text" @click="removeIndex()">
          <template #icon>
            <icon-delete />
          </template>
        </t-button>
      </t-tooltip>
    </div>
    <!-- 拓展面板按钮 -->
    <div class="expand-btn">
      <!-- 查询跳转 -->
      <div class="flex gap-8px">
        <t-tooltip :effect="theme" content="跳转到数据浏览" placement="bottom">
          <t-button
            theme="success"
            shape="square"
            variant="text"
            style="border: none"
            @click="jumpToDataBrowser()"
          >
            <template #icon>
              <icon-apps />
            </template>
          </t-button>
        </t-tooltip>
        <t-tooltip :effect="theme" content="跳转到基础查询" placement="bottom">
          <t-button
            theme="success"
            shape="square"
            variant="text"
            style="border: none"
            @click="jumpToBaseSearch()"
          >
            <template #icon>
              <icon-search />
            </template>
          </t-button>
        </t-tooltip>
        <t-tooltip :effect="theme" content="跳转到高级查询" placement="bottom">
          <t-button
            theme="success"
            shape="square"
            variant="text"
            style="border: none"
            @click="jumpToSeniorSearch()"
          >
            <template #icon>
              <icon-filter />
            </template>
          </t-button>
        </t-tooltip>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { mapState } from "pinia";
// 组件
import IndexApi from "@/components/es/api/IndexApi";
import { getDefaultDocumentSearchQueryStr } from "@/components/es/domain/DocumentSearchQuery";
// 实体类
// 工具类
import MessageUtil from "@/utils/model/MessageUtil";
import MessageBoxUtil from "@/utils/model/MessageBoxUtil";
// 存储
import { useGlobalStore, useIndexStore, useSeniorSearchStore } from "@/store";
// 其他
import { useIndexManageEvent } from "@/global/BeanFactory";
import { indexReindex } from "@/page/home/components/IndexReindex";
import PageNameEnum from "@/enumeration/PageNameEnum";
import { IndexItem } from "$/elasticsearch-client";
import IndexAlias from "@/page/home/components/IndexAlias.vue";

export default defineComponent({
  name: "IndexItem",
  components: { IndexAlias },
  props: {
    index: {
      type: Object as PropType<IndexItem>,
      required: true
    }
  },
  emits: ["refresh"],
  data: () => ({
    state: false,
    open: true
  }),
  computed: {
    ...mapState(useGlobalStore, ["isDark"]),
    indexStateBtn(): "danger" | "success" | "normal" {
      if (this.index.state === "open") {
        return "danger";
      } else if (this.index.state === "close") {
        return "success";
      } else {
        return "normal";
      }
    },

    indexStateTooltip(): string {
      if (this.index.state === "open") {
        return "关闭";
      } else if (this.index.state === "close") {
        return "打开";
      } else {
        return "未知状态";
      }
    },
    indexStateTitle(): "gray" | "" {
      if (this.index.state === "close") {
        return "gray";
      } else {
        return "";
      }
    },
    theme() {
      return this.isDark ? "dark" : "light";
    }
  },
  methods: {
    indexReindex,
    indexInfo() {
      useIndexManageEvent.emit(this.index.name);
    },
    removeIndex() {
      MessageBoxUtil.confirm("此操作将永久删除该索引, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(() =>
        IndexApi(this.index!.name)
          .delete()
          .then((res) => MessageUtil.success(JSON.stringify(res), this.reset))
          .catch((e) => MessageUtil.error("索引删除错误", e))
      );
    },
    indexOperation() {
      if (this.index.state === "open") {
        this.closeIndex();
      } else if (this.index.state === "close") {
        this.openIndex();
      } else {
        MessageUtil.warning(`未知索引状态【${this.index.state}】，无法完成操作`);
      }
    },
    openIndex() {
      IndexApi(this.index.name)
        ._open()
        .then((res) => MessageUtil.success(JSON.stringify(res), this.refreshIndex))
        .catch((e) => MessageUtil.error("打开索引失败", e));
    },
    closeIndex() {
      IndexApi(this.index.name)
        ._close()
        .then((res: any) => MessageUtil.success(JSON.stringify(res), this.refreshIndex))
        .catch((e) => MessageUtil.error("关闭索引失败", e));
    },
    execCopy(url: string) {
      window.preload.copyText(url);
      MessageUtil.success("已成功复制到剪切板");
    },
    refreshIndex() {
      useIndexStore().refreshIndex(this.index);
    },
    jumpToBaseSearch() {},
    jumpToDataBrowser() {},
    jumpToSeniorSearch() {
      if (this.index) {
        useSeniorSearchStore().loadEvent({
          link: `/${this.index.name}/_search`,
          method: "POST",
          body: getDefaultDocumentSearchQueryStr()
        });
        this.$router.push(PageNameEnum.SENIOR_SEARCH);
      }
    }
  }
});
</script>
<style scoped lang="less">
.home-index-card {
  margin: 0;
  position: relative;
  min-width: 700px;
  width: 100%;
  height: 80px;
  overflow: hidden;

  .title {
    display: flex;
    align-items: center;
    height: 40px;

    .index-item-title {
      font-size: 24px;
      font-weight: bold;

      padding: 1px 4px;
      color: var(--td-brand-color);
      line-height: 1.5715;
      text-decoration: none;
      background-color: transparent;
      border-radius: var(--td-radius-medium);
      cursor: pointer;
      transition: all 0.1s cubic-bezier(0, 0, 1, 1);

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:hover {
        color: var(--td-brand-color);
        background-color: var(--td-bg-color-container-hover);
      }
    }

    .arco-btn {
      margin: 6px;
    }
  }

  .alias {
    margin-top: 7px;
    flex-wrap: wrap;

    .alias-close {
      margin-left: 4px;
      padding: 2px;

      &:hover {
        background-color: var(--td-bg-color-component-hover);
        border-radius: 50%;
        cursor: pointer;
      }
    }
  }

  .detail {
    margin-top: 14px;
    color: var(--td-text-color-primary);
  }

  .option {
    position: absolute;
    top: 8px;
    right: 12px;
  }

  .expand-btn {
    position: absolute;
    right: 12px;
    bottom: 0;
  }

  .expand {
    margin-top: 10px;
    position: relative;

    .shard {
      border: #000000 solid 4px;
      background-color: aquamarine;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 34px;
      margin: 4px;
      cursor: pointer;
    }

    .replica {
      border: #666666 solid 4px;
      background-color: #f2f2f2;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 34px;
      margin: 4px;
      cursor: pointer;
    }
  }
}
</style>
